// eslint-disable-next-line import/no-unresolved
import React, {Component} from 'react';
import echarts from 'echarts'
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import {addResizeHook, removeHook} from '@/utils/resize';
import {dateFormat, convertDateFromString, currentTime, getMockTime} from '@/utils/time';

import {connect} from "dva";
import {TimePicker, Button, DatePicker,message} from 'antd';
import moment from "moment";


const {RangePicker} = DatePicker;


class StatusInfoOverview extends Component {
  overviewReqRef = 0;
  option = {
    title: {
      text: '终点状态变化规律',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        animation: false
      }
    },
    legend: {
      data: ['温度', '预测温度', '位置', '预测位置'],
      x: 'center'
    },
    axisPointer: {
      link: {xAxisIndex: 'all'}
    },
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 0,
        end: 100,
        // xAxisIndex: [0, 1]
      },
      {
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100,
        // xAxisIndex: [0, 1]
      }
    ],
    grid: [{
      left: 50,
      right: 50,
      height: '60%',
    },
    //   {
    //   left: 50,
    //   right: 50,
    //   top: '58%',
    //   height: '30%'
    // }
    ],
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: null
      },
      // {
      //   gridIndex: 1,
      //   type: 'category',
      //   boundaryGap: false,
      //   axisLine: {onZero: true},
      //   data: null,
      //   position: 'top'
      // }
    ],
    yAxis: [
      {
        name: '温度',
        type: 'value',
//                        boundaryGap: [0, '100%']
//         min: 300,
//         max: 450,
        interval: 50,
      },
      {
        type: 'value',
        scale: true,
        name: '位置',
        // min: 70,
        // max: 90,
        splitLine: {show: false},
        interval: 10,
      },
      // {
      //   type: 'value',
      //   gridIndex: 1,
      //   min: 300,
      //   max: 450,
      //   interval: 50,
      // },
      // {
      //   type: 'value',
      //   gridIndex: 1,
      //   min: 70,
      //   max: 90,
      //   splitLine: {show: false},
      //   interval: 10,
      // }
    ],
    series: [
      {
        name: '温度',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,

        interval: 50,
        data: []
      }, {
        type: 'line',
        scale: true,
        name: '位置',

        xAxisIndex: 0,
        yAxisIndex: 1,
        interval: 10,
        data: []

      },
      // {
      //   name: '预测温度',
      //   type: 'line',
      //   xAxisIndex: 1,
      //   yAxisIndex: 2,
      //
      //   interval: 50,
      //   data: []
      //
      // }, {
      //   type: 'line',
      //   scale: true,
      //   name: '预测位置',
      //   min: 30,
      //   max: 90,
      //   xAxisIndex: 1,
      //   yAxisIndex: 3,
      //   interval: 10,
      //   data: []
      // },
    ]
  };

  // 默认一小时间隔
  state = {
    to: new Date(currentTime().valueOf()),
    from: new Date(currentTime().valueOf()-60 * 60 * 1000)
  };

  async componentDidMount() {
    const {dispatch} = this.props;
    const {from, to} = this.state;

    const mockTime = await getMockTime("ShaoJie")

    this.setState({from:mockTime.start,to:mockTime.end})

    this.overviewReqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'fengxiang/statusInfoOverview',
        payload:{
          to:dateFormat(mockTime.start),
          from:dateFormat(new Date(mockTime.start-60 * 60 * 1000))
        }
      });
    });

    const {chartId} = this.props;
    // 基于准备好的dom，初始化echarts实例
    this.chart = echarts.init(document.getElementById(chartId));
    // 绘制图表

    this.chart.setOption(this.option);

    addResizeHook(this, this.chart.resize)
  }

  componentDidUpdate() {
    const {data} = this.props;
    if (data) {
      this.option.xAxis[0].data = data.date.map(str => str.replace(' ', '\n'));
      // this.option.xAxis[1].data = data.futureDate.map(str => str.split(' ')[1]);

      this.option.series[0].data = data.temp;
      this.option.series[1].data = data.location;
      // this.option.series[2].data = data.futureTemp;
      // this.option.series[3].data = data.futureLocation;
      this.chart.setOption(this.option, true);
    }
  }

  componentWillUnmount() {
    removeHook(this);
    cancelAnimationFrame(this.overviewReqRef);

  }

  // onChange = (value, dateString) => {
  //   if (value.length > 0) {
  //
  //     if (value[1].toDate().valueOf()
  //       - value[0].toDate().valueOf()
  //       > 8 * 60 * 60) {
  //       message.info('时间应在8小时之内');
  //       return
  //     }
  //
  //     this.state.from = value[0].toDate();
  //     this.state.to = value[1].toDate();
  //   }
  // };


  onOk = (value) => {
    if (value.length > 0) {

      if (value[1].toDate().valueOf()
        - value[0].toDate().valueOf()
        > 48 * 60 * 60 * 1000) {
        message.info('时间应在48小时之内');
        return
      }

      this.state.from = value[0].toDate();
      this.state.to = value[1].toDate();
      const {dispatch} = this.props;
      const {from, to} = this.state;

      const payload = {
        from: dateFormat(from),
        to: dateFormat(to),
      };

      dispatch({
        type: 'fengxiang/statusInfoOverview',
        payload
      });
    }

  };


  render() {


    const {
      chartId,
      width = 100,
      height = 400
    } = this.props;

    const {from, to} = this.state;
    const  dateFormat = 'YYYY-MM-DD HH:mm';
    return (
      <div>
        <div style={{marginBottom: 20, marginLeft: 5}}>
          <RangePicker
            showTime={{format: 'HH:mm'}}
            format={dateFormat}
            placeholder={['Start Time', 'End Time']}
            onOk={this.onOk}
            key={Math.random()} //强制刷新组件
            defaultValue={[moment(from, dateFormat), moment(to, dateFormat)]}
          />

        </div>

        <div id={chartId} style={{width: `${width}%`, height}}/>

      </div>
    )
  }
}

export default connect(({fengxiang}) => ({
  data: fengxiang.statusInfoOverview
}))
(StatusInfoOverview);
